<template>
  <div class="factory-content-container factory-page-container">
    <template v-if="tag.tagId">
      <div class="factory-title">
        <h2><icon-svg name="iconResTeam"></icon-svg>{{ tag.derivedName }}</h2>
        <div class="factory-handler clearfix">
          <span class="tips" v-if="tag.isRelease === 2">正在审核中</span>
          <template v-if="type === 'users'">
            <el-button size="mini" @click="handleEdit" :class="{ disabled: tag.isRelease === 2 }">
              <icon-svg name="iconFacEdit"></icon-svg>
              编辑
            </el-button>
            <el-button size="mini" @click="handleDelete">
              <icon-svg name="iconDelete"></icon-svg>
              删除
            </el-button>
          </template>
          <el-button size="mini" @click="handleCopy">
            <icon-svg name="iconCopy"></icon-svg>
            复制
          </el-button>
          <template v-if="type === 'users'">
            <el-button size="mini" @click="handleMove">
              <icon-svg name="iconMove"></icon-svg>
              移动
            </el-button>
            <el-button size="mini" @click="handleRelease(false)">
              <icon-svg :name="tag.isRelease ? 'iconRedo' : 'iconRelease'"></icon-svg>
              {{ tag.isRelease ? '取消发布' : '发布' }}
            </el-button>
            <el-button size="mini" @click="handleRelease(true)">
              <icon-svg name="iconInfoCheck"></icon-svg>
              重新发布
            </el-button>
          </template>
          <el-button size="mini" @click="handleDownload">
            <icon-svg name="iconExport"></icon-svg>
            导出结果
          </el-button>
        </div>
      </div>
      <div class="factory-wrap tag-scrollbar">
        <div class="section" v-if="isImport">
          <tag-factory-result :derivedTag="tag.factoryDerivedTagDetail.deriveTagResult" isImport></tag-factory-result>
        </div>
        <template v-else>
          <div class="section">
            <tag-factory-result :derivedTag="tag.factoryDerivedTagDetail.deriveTagResult"></tag-factory-result>
          </div>
          <div class="section">
            <div class="section-title"><icon-svg name="iconSystem"></icon-svg>客群逻辑</div>
            <tag-factory-logic :derivedTag="derivedTag" :drillGrps="drillGrps"></tag-factory-logic>
          </div>
        </template>
        <div class="section">
          <div class="section-title">
            <icon-svg name="iconPie"></icon-svg>客群画像
            <span class="section-tips">客户数：{{ grpTotal }}人</span>
          </div>
          <div class="section-content">
            <tag-factory-grpflter
              ref="tagFactoryGrpflter"
              :grpFlter="grpFlter"
              :grpTotal="grpTotal"
            ></tag-factory-grpflter>
          </div>
        </div>
      </div>
    </template>
    <div class="no-record" v-else>
      <template v-if="!loading">
        <img src="~@/assets/img/no_records.png" /><br />
        暂无内容
      </template>
      <div class="loading-box" v-else v-loading="loading" element-loading-spinner="el-icon-loading"></div>
    </div>
    <factory-tag-drawer ref="factoryTagDrawer"></factory-tag-drawer>
    <factory-derived-dialog ref="factoryDerivedDialog" @callback="callback"></factory-derived-dialog>
  </div>
</template>

<script>
import factoryTagDrawer from '../factory-tag-drawer'
import factoryDerivedDialog from './factory-derived-dialog'
import factory from '../factory'
// import api from './api'
export default {
  name: 'FactoryContentContainer',
  components: { factoryTagDrawer, factoryDerivedDialog },
  props: {
    type: {
      type: String,
      default: 'all'
      // all 全部分类 users 我的客群
    }
  },
  data() {
    return {
      loading: false,
      tag: {},
      derivedTag: {
        logicalOperation: 'and',
        tagList: []
      },
      drillGrps: [],
      grpFlter: [],
      grpTotal: 0
    }
  },
  computed: {
    isImport() {
      const derivedTag = JSON.parse(this.tag.factoryDerivedTagDetail.derivedTag.derivedTag)
      return derivedTag.request.custGroupId
    }
  },
  methods: {
    update(tag) {
      this.tag = tag
      let data = tag.factoryDerivedTagDetail
      let dataJson = JSON.parse(data.derivedTag.derivedTag)
      this.grpFlter = []
      dataJson.request.grpFlter.forEach(item => {
        let filterTag = data.baseTags.find(tag => tag.assetCode === item.mainGrp.labId)
        let params = {
          grpId: item.grpId,
          mainGrp: {
            labId: item.mainGrp.labId,
            groupTyp: item.mainGrp.groupTyp,
            labGrps: item.mainGrp.labGrps,
            groupName: dataJson.extra[item.grpId][item.mainGrp.labId].groupName,
            graphType: dataJson.extra[item.grpId][item.mainGrp.labId].graphType,
            labTbl: filterTag.labTbl,
            labFldMap: filterTag.labFldMap,
            rangeInfo: dataJson.extra[item.grpId][item.mainGrp.labId].rangeInfo,
            tagNm: filterTag.assetNm,
            valueType: filterTag.valueType,
            enums: filterTag.enums
          }
        }
        if (item.subGrp && item.subGrp.labId) {
          let filterSubTag = data.baseTags.find(tag => tag.assetCode === item.subGrp.labId)
          params.subGrp = {
            labId: item.subGrp.labId,
            groupTyp: item.subGrp.groupTyp,
            labGrps: item.subGrp.labGrps,
            groupName: dataJson.extra[item.grpId][item.subGrp.labId].groupName,
            graphType: dataJson.extra[item.grpId][item.subGrp.labId].graphType,
            labTbl: filterSubTag.labTbl,
            labFldMap: filterSubTag.labFldMap,
            rangeInfo: dataJson.extra[item.grpId][item.subGrp.labId].rangeInfo,
            tagNm: filterSubTag.assetNm,
            valueType: filterSubTag.valueType,
            enums: filterSubTag.enums
          }
        }
        this.grpFlter.push(params)
      })
      let list = dataJson.request.labGrps.labs ? dataJson.request.labGrps.labs : []
      this.derivedTag.logicalOperation = dataJson.request.labGrps.logicTyp
      this.$set(this.derivedTag, 'tagList', factory.initLogic(list, data.baseTags))
      this.drillGrps = dataJson.request.drillGrps
      this.$nextTick(() => {
        let tagReault = JSON.parse(data.deriveTagResult)
        this.grpTotal = tagReault.grpTotal
        this.$refs.tagFactoryGrpflter.refresh(tagReault)
        this.setLoading(false)
      })
    },
    setLoading(arg) {
      this.loading = arg
    },
    handleEdit() {
      if (this.tag.isRelease == 2) {
        this.$message.info('客群正在审核中！')
        return
      }
      const derivedTag = JSON.parse(this.tag.factoryDerivedTagDetail.derivedTag.derivedTag)
      this.$blank(derivedTag.request.custGroupId ? 'factory-import' : 'factory-config', {
        query: { tagId: this.tag.tagId, groupId: this.tag.groupId }
      })
    },
    handleDelete() {
      this.$confirm(`确定删除【${this.tag.derivedName}】`).then(() => {
        let messageBox = document.getElementsByClassName('el-message-box__wrapper')
        messageBox[0].focus() // 防止按空格键重复确定
        this.$ajax({
          url: this.$ajax.setUrl(`tagFactory/${this.tag.tagId}`),
          method: 'delete',
          params: this.$ajax.setParams()
        }).then(({ data }) => {
          if (data && data.code === '0') {
            this.$message.success(data.data || data.msg)
            this.$emit('callback')
          } else {
            this.$message.error(data.data || data.msg)
          }
        })
      })
    },
    handleCopy() {
      this.$refs.factoryDerivedDialog.showDialog({
        tagId: this.tag.tagId,
        derivedName: this.tag.derivedName,
        type: 'copy'
      })
    },
    handleMove() {
      this.$refs.factoryDerivedDialog.showDialog({
        tagId: this.tag.tagId,
        type: 'move'
      })
    },
    handleRelease(isAggain = false) {
      this.$confirm(
        `确定${isAggain ? '重新发布' : this.tag.isRelease ? '取消发布' : '发布'}客群【${this.tag.derivedName}】？`
      ).then(() => {
        let messageBox = document.getElementsByClassName('el-message-box__wrapper')
        messageBox[0].focus() // 防止按空格键重复确定
        this.$utils
          .release(
            this.tag.tagId,
            this.tag.derivedName,
            '20',
            isAggain || !this.tag.isRelease ? 'post' : 'delete',
            isAggain
          )
          .then(data => {
            this.$message.success(data.msg)
            this.$emit('callback')
          })
          .catch(data => {
            this.$message.error(data.data || data.msg)
          })
      })
    },
    handleDownload() {
      let derivedTag = JSON.parse(this.tag.factoryDerivedTagDetail.derivedTag.derivedTag)
      derivedTag.request.dataDate = ''
      derivedTag.request.grpFlter = []
      this.$refs.factoryTagDrawer.showDrawer({
        derivedTagId: this.tag.tagId,
        groupId: this.tag.groupId,
        derivedTagNm: this.tag.derivedName,
        derivedTag: JSON.stringify(derivedTag)
      })
    },
    callback() {
      this.$emit('callback')
    }
  }
}
</script>

<style lang="scss" scoped>
.factory-content-container {
  .section {
    background-color: #f6f7f8;
    .section-title {
      font-size: 17px;
      font-weight: bold;
      padding: 10px 0 0 20px;
      color: #465fbc;
      svg {
        width: 20px;
        height: 20px;
        margin: -2px 10px 0 0;
        vertical-align: middle;
      }
    }
    & + .section {
      margin-top: 20px;
    }
  }
  .section-content {
    padding: 20px;
  }
  .no-record {
    font-size: 17px;
    text-align: center;
    img {
      width: 200px;
      margin: 30px 0 10px 0;
    }
  }
  .loading-box {
    height: 300px;
    font-size: 30px;
  }
  .section-tips {
    font-size: 15px;
    margin-left: 10px;
    color: #666;
    vertical-align: bottom;
  }
  .tips {
    font-size: 16px;
    font-weight: bold;
    vertical-align: middle;
    margin-top: -7px;
  }
}
</style>
